/**
 * 学习目标： setState 修改状态
 *    this.setState() 两个作用：
 *      1. 更新 state 数据
 *      2. 渲染 UI 界面(调用了 render 方法)
 */

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  state = {
    count: 0,
  }

  render() {
    return (
      <>
        <h1>Hello React</h1>
        <h2>当前的数值为{this.state.count}</h2>
        <button onClick={this.handleClick}>+1</button>
      </>
    )
  }

  handleClick = () => {
    console.log('获取数据', this.state.count)
    // ❌ this.state.count = 10
    // ❌ VsCode 有错误提示：Do not mutate state directly. Use setState()
    // ❌            翻译：不要直接改变状态。请使用 setState ()
    // this.setState() 两个作用：
    //    1. 更新 state 数据
    //    2. 渲染 UI 界面(调用了 render 方法)
    // 💥常见错误：通过赋值的方式修改 state，render 方法不会运行，视图不会更新（数据和视图不同步）
    this.setState({ count: this.state.count + 1 })
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
